import Charts from "../_baseComponents/BaseCharts/index.vue";
import { getCompomentName } from "../_utils/util.js";
import { dataOptions } from "./util";

const Bar = {
  name: getCompomentName("Bar"),
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    xData: {
      type: Array,
      default: () => [],
    },
    tooltip: {
      type: Object,
      default: () => ({}),
    },
  },
  render(h) {
    const { data, xData } = this;
    let options = {
      xAxis: {
        type: "category",
        data: xData,
      },
      yAxis: {
        type: "value",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      series: [...dataOptions(data)],
    };

    return (
      <div>
        <Charts options={options} />
      </div>
    );
  },
};

Bar.install = function (Vue) {
  Vue.component(Bar.name, Bar);
};

export default Bar;
